<template>
  <el-config-provider :locale="zhCn">
    <div>
      <el-form :model="contractDetail" ref="form" label-width="120px">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
              <el-form-item label="员工信息" label-position="top"
                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                <div class="progress-bar">
                  <div class="progress"></div>
                </div>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="员工姓名" label-position="top">
                <el-input v-model="contractDetail.employeeName" style="width: 260px" disabled />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="入职时间" label-position="top">
                <el-date-picker 
                  v-model="contractDetail.dateOfInduction" 
                  type="date" 
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 260px;"
                  disabled>
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="工号" label-position="top">
                <el-input v-model="contractDetail.workNumber" style="width: 260px" disabled />
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="部门" label-position="top">
                <el-input v-model="contractDetail.department" style="width: 260px" disabled />
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="岗位" label-position="top">
                <el-input v-model="contractDetail.post" style="width: 260px" disabled />
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="员工状态" label-position="top">
                <el-input v-model="contractDetail.employeeStatus" style="width: 260px" disabled />
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="聘用形式" label-position="top">
                <el-input v-model="contractDetail.employmentForm" style="width: 260px" disabled />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="24">
            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
              <el-form-item label="合同信息" label-position="top"
                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                <div class="progress-bar">
                  <div class="progress"></div>
                </div>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="合同编号" label-position="top">
                <el-input v-model="contractDetail.contractNumber" style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="是否为主合同" label-position="top">
                <el-radio-group v-model="contractDetail.mainContract">
                  <el-radio label="是">是</el-radio>
                  <el-radio label="否">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="合同类型" label-position="top">
                <el-select v-model="contractDetail.contractType" placeholder="选择合同类型" style="width: 260px">
                  <el-option label="固定期限劳动合同" value="固定期限劳动合同" />
                  <el-option label="无固定期限劳动合同" value="无固定期限劳动合同" />
                  <el-option label="实习协议" value="实习协议" />
                  <el-option label="劳务合同" value="劳务合同" />
                  <el-option label="劳务派遣合同" value="劳务派遣合同" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="合同开始日期" label-position="top">
                <el-date-picker 
                  v-model="contractDetail.contractStartDate" 
                  type="date" 
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 260px;">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="合同结束日期" label-position="top">
                <el-date-picker 
                  v-model="contractDetail.contractEndDate" 
                  type="date" 
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 260px;">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="合同签订日期" label-position="top">
                <el-date-picker 
                  v-model="contractDetail.contractSignedDate" 
                  type="date" 
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 260px;">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="合同期限" label-position="top">
                <el-input v-model="contractDetail.contractDuration" style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="合同主体" label-position="top">
                <el-input v-model="contractDetail.contractSubject" style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="合同备注" label-position="top">
                <el-input 
                  v-model="contractDetail.contractRemarks" 
                  type="textarea" 
                  :rows="2" 
                  style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        
        <hr>
        <el-form-item style="margin-top: 6px;">
          <el-button type="primary" @click="updateContract">保存</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-config-provider>
</template>

<script setup>
import { ref } from 'vue'
import server from '@/api/request'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const contractDetail = ref({
  contractsId: null,
  employeeId: null,
  dateOfInduction: null,
  workNumber: '',
  department: '',
  employeeName: '',
  post: '',
  employeeStatus: '',
  employmentForm: '',
  contractNumber: '',
  mainContract: '是',
  contractType: '',
  contractStartDate: null,
  contractEndDate: null,
  contractDuration: '',
  contractSignedDate: null,
  contractSubject: '',
  contractRemarks: ''
})

// 设置合同详情数据
const setContractDetail = (data) => {
  contractDetail.value = {
    ...contractDetail.value,
    ...data
  }
}
const updateContract = async () => {
  try {
    const response = await server.put(`/employeeContracts/update`, contractDetail.value)
    if (response.code === 200) {
      ElMessage.success('合同信息更新成功')
      emits('updated')
    } else {
      ElMessage.error('更新失败: ' + response.message)
    }
  } catch (error) {
    console.error('更新合同信息失败:', error)
    ElMessage.error('更新合同信息失败')
  }
}
// 更新合同信息

// 关闭对话框
const closeDialog = () => {
  emits('close')
}

// 定义 emits
const emits = defineEmits(['updated', 'close'])
defineExpose({
  setContractDetail
})
</script>

<style scoped>
.progress-bar {
  height: 6px;
  background-color: #ccebf7;
  border-radius: 3px;
  display: flex;
  width: 100%;
  overflow: hidden;
}

.progress {
  width: 8%;
  height: 10;
  background-color: #61c3ea;
  border-radius: 3px 0 0 3px;
  transition: width 0.3s ease;
}
</style>